<template>
  <div>
    <!-- 查询条件-->
    <el-form :inline="true" :model="SearchDate" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="SearchDate.uname" placeholder="姓名" v-on:input="serachAll" clearable></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="SearchDate.sex" placeholder="性别">
          <el-option label="请选择" value=""></el-option>
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="serachAll">查询</el-button>
        <!-- Form -->
        <el-button type="text" @click="itsAdd"
          ><el-button type="primary" plain>添加用户</el-button></el-button
        >
        <el-dialog title="新增/修改" :visible.sync="dialogFormVisible">
          <el-form :model="saveData">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input v-model="saveData.uname" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="账号" :label-width="formLabelWidth">
              <el-input
                v-model="saveData.uaccount"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="手机" :label-width="formLabelWidth">
              <el-input v-model="saveData.phone" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="身份证" :label-width="formLabelWidth">
              <el-input v-model="saveData.idcard" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="住址" :label-width="formLabelWidth">
              <el-input
                v-model="saveData.address"
                autocomplete="off"
              ></el-input>
            </el-form-item>

            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-select v-model="saveData.sex" placeholder="请选择性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="noAddOrUpdate">取 消</el-button>
            <el-button type="primary" @click="addOrUpDate">确 定</el-button>
          </div>
        </el-dialog>
      </el-form-item>
    </el-form>

    <!-- 列表展示 -->

    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <el-table-column label="#" width="80">
        <!-- <template slot-scope="scope"> -->
        <span style="margin-left: 10px"><el-checkbox></el-checkbox></span>
        <!-- </template> -->
      </el-table-column>

      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px" v-html="scope.row.uname"></span>
        </template>
      </el-table-column>

      <el-table-column label="账号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.uaccount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="手机号" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>

      <el-table-column label="性别" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.sex }}</span>
        </template>
      </el-table-column>

      <el-table-column label="住址" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <!-- 分页 -->

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[3, 6, 9, 11]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 查询条件数据
      SearchDate: {
        uname: "",
        sex: "",
      },
      //用来判断是否为修改或者增加
      isAddOrUpdate: -1,
      //弹出框的显示
      dialogFormVisible: false,
      //弹出框的宽度
      formLabelWidth: "120px",
      //传输的数据（新增或者修改）
      saveData: {
        uid: "",
        uname: "",
        uaccount: "",
        phone: "",
        sex: "",
        idcard: "",
        address: "",
      },
      // 列表展示数据
      tableData: [],
      //页面加载转圈
      loading: true,
      // 分页数据
      total: "",
      pageSize: "",
      currentPage: "",
    };
  },

  created() {
    this.currentPage = 1;
    this.pageSize = 3;
    this.showList();
  },
  methods: {
    //查询条件方法和所有数据
    showList() {
      console.log(this.SearchDate.uname);
      console.log(this.SearchDate.sex);
      
      this.$axios
        .post("/ever-user/serach/" + this.currentPage + "/" + this.pageSize + "?foo=" + new Date().getTime(), {
          uname: this.SearchDate.uname,
          sex: this.SearchDate.sex,
        })
        .then((res) => {
           console.log(res.data);
          this.loading = false;
          this.tableData = res.data.list;
          this.total = parseInt(res.data.total.value);   
          console.log("数据加载成功");
          console.log(this.tableData);
          console.log(this.total);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    serachAll() {
      this.currentPage = 1;
      this.showList();
    },
    //点击增加按钮
    itsAdd() {
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    //增加或修改的方法
    addOrUpDate() {
      var uname = this.saveData.uname;
      var uaccount = this.saveData.uaccount;
      var phone = this.saveData.phone;
      var sex = this.saveData.sex;
      var idcard = this.saveData.idcard;
      var address = this.saveData.address;

      const reg = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
      if (phone == "" || phone == undefined || phone == null) {
        this.warnningMessage();
        return;
      } else {
        if (!reg.test(phone) && phone != "") {
          this.errorMessage("请输入正确的电话号码或者固话号码");
          return;
        }
      }

      const reg2 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;

      if (idcard == "" || idcard == undefined || idcard == null) {
        this.warnningMessage("身份证不能为空");
        return;
      } else {
        if (!reg2.test(idcard) && idcard != "") {
          this.errorMessage("请输入正确的身份证");
          return;
        }
      }

      if (this.isAddOrUpdate < 0) {
        this.$axios
          .post("/ever-user/addUser", {
            uname: this.saveData.uname,
            uaccount: this.saveData.uaccount,
            phone: this.saveData.phone,
            sex: this.saveData.sex,
            idcard: this.saveData.idcard,
            address: this.saveData.address,
          })
          .then((res) => {
            console.log(res);
            this.dialogFormVisible = !this.dialogFormVisible;
            this.saveData = {
              uname: "",
              uaccount: "",
              phone: "",
              sex: "",
              idcard: "",
              address: "",
            };
            this.currentPage = 1;
            const h = this.$createElement;
            this.$notify({
              message: h("i", { style: "color: teal" }, res.data),
            });
            this.showList();
          })
          .catch((err) => {
            const h = this.$createElement;
            this.$notify({
              message: h("i", { style: "color: teal" }, "添加用户失败"),
            });
            console.error(err);
          });
      } else if (this.isAddOrUpdate > 0) {
        var uid = this.saveData.uid;
        console.log(uid);
        this.$axios
          .put("/ever-user/update?uid=" + uid, {
            uname: this.saveData.uname,
            uaccount: this.saveData.uaccount,
            phone: this.saveData.phone,
            sex: this.saveData.sex,
            idcard: this.saveData.idcard,
            address: this.saveData.address,
          })
          .then((res) => {
            console.log(res);
            this.dialogFormVisible = !this.dialogFormVisible;
            this.saveData = {
              uname: "",
              uaccount: "",
              phone: "",
              sex: "",
              idcard: "",
              address: "",
            };
            this.showList();
            this.isAddOrUpdate = -1;
            const h = this.$createElement;
            this.$notify({
              message: h("i", { style: "color: teal" }, "修改用户信息成功"),
            });
          })
          .catch((err) => {
            const h = this.$createElement;
            this.$notify({
              message: h("i", { style: "color: teal" }, "修改用户信息失败"),
            });
            console.error(err);
          });
      }
    },
    //错误的提示
    errorMessage(str) {
      this.$message.error(str);
    },
    //警告的提示
    warnningMessage(str) {
      this.$message({
        message: str,
        type: "warning",
      });
    },
    // 点击编辑按钮
    handleEdit(index, row) {
      console.log(index)
      var uid = row.uid;
      this.$axios
        .get("/ever-user/findOne?uid=" + uid)
        .then((res) => {
          console.log(res);
          var user = res.data;
          this.saveData = {
            uid: user.uid,
            uname: user.uname,
            uaccount: user.uaccount,
            phone: user.phone,
            sex: user.sex,
            idcard: user.idcard,
            address: user.address,
          };
          this.isAddOrUpdate = 1;
          this.dialogFormVisible = !this.dialogFormVisible;
        })
        .catch((err) => {
          console.error(err);
        });
      console.log(index, row);
    },
    //点击取消按钮
    noAddOrUpdate() {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.saveData = {
        uname: "",
        uaccount: "",
        phone: "",
        sex: "",
        idcard: "",
        address: "",
      };
      this.isAddOrUpdate = -1;
    },
    //点击删除按钮
    handleDelete(index, row) {
      // this.tableData.splice(index,1);
      var uid = row.uid;
      console.log(uid);
      this.$axios
        .delete("/ever-user/deleteById?uid=" + uid)
        .then((res) => {
          this.currentPage = 1;
          
          this.showList();
          console.log(res);
          
        })
        .catch((err) => {
          console.error(err);
        });
    },
    // 分页方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.showList();
      console.log(val);
      console.log(this.pageSize);
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.showList();
      console.log(`当前页: ${val}`);
    },
  },
};
</script>
